﻿
<!--
https://github.com/netnr
https://gitee.com/netnr
https://www.netnr.com
https://zme.ink
-->


<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' />


    <title>身份图标 脚本服务</title>

    <meta name="keywords" content="netnr NET牛人 身份图标" />
    <meta name="description" content="Script Services 生成哈希头像" />

</head>
<body>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css' rel='stylesheet' />
<link href='https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/jzjs@2.0.2/2.0.2/jz.min.js'></script>
<link href='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.css' rel='stylesheet' />
<script src='https://cdn.jsdelivr.net/gh/netnr/cdn/libs/netnr-nav/1.1.2/netnrnav.js' defer async></script>
        <link href="/css/global.css?v=NAI_hOr6ZSg5NjaPo94olMdf7kAXXyp9gYOiuK69lLE" rel="stylesheet" />
        <script src="/js/global.js?v=-UUx_lkaONxBXMxYH5RB2QtqMLBOuqV077SxjKI08E4"></script>
            <!--导航-->
            <button type="button" class="MenuToggle show-in-mobile btn btn-lg btn-warning ml-3 mt-3">
                <span class="fa fa-align-justify"></span>
            </button>
            <div class="netnrnav horizontal">
                <div class="netnrnav-wrapper">
                    <ul>
                        <li><a href="https://www.netnr.com" class="siteIcon"><img src="/favicon.ico" /> 首页</a></li>
                        <li><a href="https://www.netnr.com/gist/discover" title="代码片段"><span class="fa fa-fw fa-file-code-o"></span> Gist</a></li>
                        <li><a href="https://www.netnr.com/run/discover" title="在线运行代码"><span class="fa fa-fw fa-play"></span> Run</a></li>
                        <li><a href="https://www.netnr.com/doc" title="文档管理"><span class="fa fa-fw fa-book"></span> Doc</a></li>
                        <li><a href="https://www.netnr.com/draw/discover" title="绘制"><span class="fa fa-fw fa-paint-brush"></span> Draw</a></li>
                        <li><a href="/" title="ss.js.org"><span class="fa fa-fw fa-wrench"></span> 服务</a></li>
                        <li style="background-image: radial-gradient(ellipse, white, rgb(227, 248, 240))">
                            <!--标题-->
                                <a href='javascript:location.reload(false)' title="生成哈希头像">
                                    <svg class="titleicon"><use xlink:href="#pixel"></use></svg> &#x8EAB;&#x4EFD;&#x56FE;&#x6807;
                                </a>
                        </li>
                        <li>
                            <a class="text-muted"><span class="fa fa-fw fa-ellipsis-h"></span></a>
                            <ul>
                                <li><a target="_blank" title="码云" href="https://gitee.com/netnr"><i class="fa fa-fw fa-git"></i> Gitee <sup><i class="fa small fa-external-link"></i></sup></a></li>
                                <li><a target="_blank" title="GitHub" href="https://github.com/netnr"><i class="fa fa-fw fa-github"></i> GitHub <sup><i class="fa small fa-external-link"></i></sup></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        <div class="min300 mt-3">
            <style>
    .nr-view-1, .nr-view-2 {
        display: inline-block;
    }
</style>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group mb-3">
                <span class="input-group-append">
                    <input type="number" class="form-control nr-size" style="width:90px" value="420" min="2" step="2" title="大小" placeholder="大小" />
                </span>
                <input type="text" class="form-control nr-value" placeholder="请输入身份（昵称、标识等）" autofocus autocomplete="off">
            </div>
        </div>
        <div class="col d-none">
            <div class="nr-view-1 border">
            </div>
            <div class="my-3">
                <a href="https://github.com/stewartlord/identicon.js" class="text-muted" target="_blank">GitHub-style</a>
                <a href="javascript:void(0)" class="nr-down mx-3" data-type="svg1">下载 SVG</a>
                <a href="javascript:void(0)" class="nr-down" data-type="image1">下载 JPG</a>
            </div>
        </div>
        <div class="col d-none">
            <div class="nr-view-2 border">
            </div>
            <div class="my-3">
                <a href="https://github.com/dmester/jdenticon" class="text-muted" target="_blank">jdenticon</a>
                <a href="javascript:void(0)" class="nr-down mx-3" data-type="svg2">下载 SVG</a>
                <a href="javascript:void(0)" class="nr-down" data-type="image2">下载 JPG</a>
            </div>
        </div>
    </div>
</div>

<script src='https://cdn.jsdelivr.net/npm/jdenticon@3.1.0/dist/jdenticon.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/identicon.js@2.3.3/pnglib.js'></script>
<script src='https://cdn.jsdelivr.net/npm/identicon.js@2.3.3/identicon.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/crypto-js@4.0.0/crypto-js.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.7/dist/html2canvas.min.js'></script>


<script>

    var ii = {
        init: function () {
            $('.nr-size').on('input', function () {
                ii.build();
            });
            $('.nr-value').on('input', function () {
                ii.build();
            });

            $('.nr-down').click(function () {
                var type = this.getAttribute('data-type');
                switch (type) {
                    case "svg1":
                        ss.dowload($('.nr-view-1').html(), "identicon.svg");
                        break;
                    case "image1":
                        $('.nr-view-1').removeClass('border');
                        html2canvas($('.nr-view-1')[0]).then(function (canvas) {
                            ss.dowload(canvas, "identicon.jpg");
                            $('.nr-view-1').addClass('border')
                        })
                        break;
                    case "svg2":
                        ss.dowload($('.nr-view-2').html(), "identicon.svg");
                        break;
                    case "image2":
                        $('.nr-view-2').removeClass('border');
                        html2canvas($('.nr-view-2')[0]).then(function (canvas) {
                            ss.dowload(canvas, "identicon.jpg");
                            $('.nr-view-2').addClass('border');
                        })
                        break;
                }
            });
        },

        build: function () {
            window.clearTimeout(ii.defer);

            ii.defer = setTimeout(function () {
                var value = $('.nr-value').val();
                var size = $('.nr-size').val() || 420;

                var hash = CryptoJS.SHA1(value).toString();
                var data = new Identicon(hash, {
                    size: size,
                    format: "svg"
                }).toString();
                var o1 = CryptoJS.enc.Base64.parse(data).toString(CryptoJS.enc.Utf8);
                $('.nr-view-1').html(o1).parent().removeClass('d-none');
                $('.nr-view-1').children().removeAttr('style');

                var o2 = jdenticon.toSvg(value, size);
                $('.nr-view-2').html(o2).parent().removeClass('d-none');
            }, 500)
        }
    }

    ii.init();
</script>
        </div>
            <a href="javascript:ss.toTop();" class="totop" title="返回顶部">ˆ</a>
</body>
</html>
